<template>
  <div>
    <h1>App</h1>
    <h2>v3</h2>
    <!-- {{ count.value }} <button @click="count.value++">+</button> -->
    {{ count }} <button @click="count++">+</button>
    <hr>
    {{ info.name }}-{{ info.age }} <button @click="info.age++">age++</button>
    <hr>
    {{ info.size.w }} <button @click="info.size.w++">w++</button>
  </div>
</template>

<script setup>
import { ref, shallowRef } from "vue";
const count = ref(100);//{value:100}
// console.log(count.value);

const info = shallowRef({
  name: 'jack',
  age: 20,
  size: {
    w: 100,
    h: 200
  }
});

console.log(info.value.name);

setTimeout(() => {
  info.value = {
    name: 'jack',
    age: 20,
    size: {
      w: 1000,
      h: 2000
    }
  };
}, 4000);

</script>